<template>
<div style="width:100%;height:100%">
	<el-row :gutter="20" style="text-align: center;background:rgba(0,0,0,0)">
      <el-col :span="12" >
        <div class="section">
          <div class="box_" style="padding:15px">
            <span></span>
            <span></span>
            <span style="margin:0 0 0 36.5%"></span>
            <span style="margin:0 0 0 -36.5%"></span>
            <p class="title">{{dataNum.edu[0].name}}</p>
            <div class="value" v-if="jz">{{dataNum.edu[0].value}}</div>
              <animae-jz class="value" v-if="!jz"></animae-jz>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="section">
          <div class="background-img">
            <div class="box_" style="padding:15px">
              <span></span>
              <span></span>
              <span style="margin:0 0 0 36.5%"></span>
              <span style="margin:0 0 0 -36.5%"></span>
              <p class="title">{{dataNum.edu[1].name}}</p>
              <div class="value" v-if="jz">{{dataNum.edu[1].value}}</div>
              <animae-jz class="value" v-if="!jz"></animae-jz>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
	<el-row :gutter="20" :style="`text-align: center;background:rgba(0,0,0,0);margin-top:${mtop}px`">
      <el-col :span="12">
        <div class="section">
          <div class="box_" style="padding:15px">
            <span></span>
            <span></span>
            <span style="margin:0 0 0 36.5%"></span>
            <span style="margin:0 0 0 -36.5%"></span>
            <p class="title">{{dataNum.edu[2].name}}</p>
            <div class="value" v-if="jz">{{dataNum.edu[2].value}}</div>
            <animae-jz class="value" v-if="!jz"></animae-jz>
          </div>
        </div>
      </el-col>
	  <el-col :span="12">
        <div class="section">
          <div class="box_" style="padding:15px">
            <span></span>
            <span></span>
            <span style="margin:0 0 0 36.5%"></span>
            <span style="margin:0 0 0 -36.5%"></span>
            <p class="title">{{dataNum.edu[3].name}}</p>
            <div class="value" v-if="jz">{{dataNum.edu[3].value}}</div>
            <animae-jz class="value" v-if="!jz"></animae-jz>
          </div>
        </div>
      </el-col>
    </el-row>
	<el-row :gutter="20" :style="`text-align: center;background:rgba(0,0,0,0);margin-top:${mtop}px`">
	  <el-col :span="12">
	    <div class="section">
	      <div class="box_" style="padding:15px">
	        <span></span>
	        <span></span>
	        <span style="margin:0 0 0 36.5%"></span>
	        <span style="margin:0 0 0 -36.5%"></span>
	        <p class="title">应届毕业生人数</p>
	        <div class="value" v-if="jz">{{schoolNum[1].value}}</div>
	        <animae-jz class="value" v-if="!jz"></animae-jz>
	      </div>
	    </div>
	  </el-col>
	  <el-col :span="12">
	    <div class="section">
	      <div class="box_" style="padding:15px">
	        <span></span>
	        <span></span>
	        <span style="margin:0 0 0 36.5%"></span>
	        <span style="margin:0 0 0 -36.5%"></span>
	        <p class="title">在校生总数</p>
	        <div class="value" v-if="jz">{{schoolNum[0].value}}</div>
	        <animae-jz class="value" v-if="!jz"></animae-jz>
	      </div>
	    </div>
	  </el-col>
	</el-row>
</div>


</template>
<script>
import { getProportionOfEducation } from '@/api/data'
import { getAllSchoolNum } from '@/api/data';
export default {
	props: ['height', 'dateProp'],
	data() {
		return {
			chartsDom: null,
			chartsData: [],
			jz:true,
			mtop:this.height/4+20,
			dataNum:'',
			schoolNum:'',
			leftData: [{ name: '男', value: '0' }, { name: '女', value: '0' }],
			rightData: [{ name: '博士', value: '0' }, { name: '硕士', value: '0' }, { name: '本科', value: '0' }, { name: '专科', value: '0' }]
		};
	},
	computed: {
		setStyle: {
			get() {
				return 0;
			},
			set(val) {
				this.chartsDom = {
					width: (val - 30) / 2 + 'px',
					height: this.height - 30 - 31 + 'px',
					float: 'left',
					'z-index': 100,
					position: 'relative'
					// 'background-color': 'red'
				};
			}
		}
	},
	mounted() {
		this.setStyle = this.setStyle;
		this.$nextTick(_ => {
			this.init();
		});
	},
	methods: {
		init() {
			this.jz=false
			getProportionOfEducation(this.dateProp).then(({ data: { data } }) => {
				this.jz=true
				this.dataNum=data
			});
			getAllSchoolNum(this.dateProp).then(({ data: { data } }) => {
				this.jz=true
				this.schoolNum=data
				console.log(this.schoolNum)
			});
		},
		chartInit(ele, data) {
			let option = {
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)'
				},
				legend: {
					orient: 'vertical',
					right: 0,
					top: 50,
					data: data.map(v => v.name),
					textStyle: {
						color: '#8ebafb',
						fontSize: 16
					},
					formatter: name => {
						let thisIndex = data.findIndex(value => {
							return value.name === name;
						});
						return name + ' ' + data[thisIndex].value;
					}
				},
				series: [
					{
						name: '人数分部',
						type: 'pie',
						radius: [ele === 'charts01' ? '0%' : '50%', '70%'],
						center: ['30%', '50%'],
						avoidLabelOverlap: false,
						label: {
							show: false
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						data: data
					}
				],
				color: ['#37a2da', '#67e0e3', '#ffdb5c', '#ff9f7f'].reverse()
			};

			let chart = this.$echarts.init(this.$refs[ele]);
			chart.setOption(option);
		}
	}
};
</script>
<style lang="stylus" scoped>
.section {
  height: 100%;
  min-height: auto;
  background: rgba(0, 0, 0, 0);

  .title {
    font-size: 12px;
  }

  .value {
    font-size: 24px;
    font-weight: bold;
    margin-top: 5px;
  }
}
</style>
